<template>
  <div>
    <div class="settingUp" @click="clickShow">
      <i :class="showI ? 'down': 'up'" class="el-icon-arrow-down" style="line-height: 36px;height: 100%;"></i>
      <i class="el-icon-error" style="line-height: 36px;height: 100%;position: absolute;right: 0;display: none"></i>
    </div>
    <slot></slot>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        showI: true
      }
    },
    props: {},
    methods: {
      clickShow() {
        this.showI = !this.showI
        this.$emit('clickShow', this.showI);
      }
    }
  }
</script>

<style scoped lang="scss">
  .show{
    transition: height .8s;
    overflow: hidden;
    height: 0;
  }

  .showHowver:hover {
    .el-icon-error{
      display: inline-block !important;
    }
  }
  .down{
    transition: transform .3s;
    transform: rotateZ(0deg);
  }
  .up{
    transition: transform .3s;
    transform: rotateZ(180deg);
  }
  /deep/ .el-input__inner{
    cursor: pointer;
  }

  /*滚动条样式*/
  .box::-webkit-scrollbar {
    width: 6px;
    /*height: 4px;*/
  }

  .box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
  }

  .box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
  }

  .settingUp {
    position: absolute;
    right: 40px;
    top:110px;
    font-size: 24px;
    color: #606266;
    cursor: pointer
  }
</style>
